<template>
	<view class="login-msg">
		<view class="title">
			<view class="title-active">验证码登录</view>
		</view>
		<view class="login-name flex-between">
			<image src="../../static/icon_phone.png" class="icon"></image>
			<u--input
				v-model="userName"
				placeholder="请填写手机号码"
				placeholderClass="holder"
				border="none"
				clearable
				maxlength="11"
				@input="bindUserName"
				@delete="clearNameMsg"
			></u--input>
		</view>
		<view class="login-name flex-between">
			<view class="flex-align">
				<image src="../../static/icon_code.png" class="icon"></image>
				<u--input
					v-model="userYzm"
					placeholder="验证码"
					placeholderClass="holder"
					border="none"
					clearable
					type="number"
					maxlength="6"
					@input="bindUserYzm"
				></u--input>
			</view>
			<view :class="'yzm ' + (getYzm ? 'dis-btn' : '')" @tap.stop="getYzmHandle">
				{{ yzmStatus }}
			</view>
		</view>

		<button type="button" :class="'login-btn ' + (canLogin ? 'login-btn2' : '')" @tap="commitLogin">
			立即登录
		</button>
		<view class="tips">未注册用户首次登录时，我们将会为您自动注册</view>
		<u-checkbox-group
			v-model="agreeChecked"
			placement="row"
			@change="onChange"
			activeColor="#e50012"
		>
			<view class="checkGroup" :class="{ checked: agreeChecked.length }">
				<u-checkbox
					shape="circle"
					name="agree"
					label="已阅读并同意"
					labelSize="24rpx"
					labelColor="#999"
				></u-checkbox>
				<text @click.stop="checkboxClick" class="blue">《用户注册协议和隐私政策》</text>
			</view>
		</u-checkbox-group>
		<Policy ref="policy"></Policy>
	</view>
</template>

<script>
import { getUrlCode, ifAuthed, filterDo, baseUrl } from '@/js/config/index.js'
import Common from '../../utils/common.js'
import { loginHandle } from '@/utils/mpWx.js'
import Policy from './component/policy.vue'
let stopTime = null
const app = getApp()
export default {
	components: { Policy },
	data() {
		return {
			yzmStatus: '获取验证码',
			getYzm: false,
			canLogin: false,
			userName: '',
			userYzm: '',
			yzmBtnUse: true, //验证码按钮是否可点击
			agreeChecked: [], //是否选中协议
			isLock: false //是否点击过按钮
		}
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
		clearInterval(stopTime)
		// #ifdef H5

		// #endif
	},
	methods: {
		//绑定手机号
		bindUserName: function (val) {
			this.userName = val
			this.isCanLogin()
		},

		// 清除手机号
		clearNameMsg: function () {
			this.userName = ''
			this.isCanLogin()
		},

		isCanLogin() {
			var isPhone = Common.isPhoneAvailable(this.userName)
			this.canLogin = isPhone && this.userYzm.length >= 4
		},

		// 绑定验证码输入框
		bindUserYzm: function (e) {
			this.userYzm = e
			this.isCanLogin()
		},

		// 获取验证码
		getYzmHandle() {
			let that = this
			var isPhone = Common.isPhoneAvailable(that.userName)

			if (!isPhone) {
				uni.$u.toast('请输入正确的手机号!')
			} else if (that.yzmStatus.indexOf('秒') > -1) {
				uni.$u.toast('短信发送中，请勿重复提交！！')
			} else {
				if (!that.yzmBtnUse) return
				that.yzmBtnUse = false
				this.$https(
					false,
					'get',
					{
						url: `/login/login/smscode/${this.userName}`
					},
					(res) => {
						let time = 120
						uni.$u.toast('验证码已发送，请注意查收！')
						stopTime = setInterval(function () {
							time--
							that.yzmStatus = time + '秒后重发'
							that.getYzm = true

							if (time == 0) {
								clearInterval(stopTime)
								that.yzmStatus = '重新获取'
								that.getYzm = false
								that.yzmBtnUse = true
							}
						}, 1000)
					},
					(err) => {
						that.yzmBtnUse = true
					}
				)
			}
		},

		// 选择协议
		onChange(event) {
			this.agreeChecked = event
		},

		// 提交登录信息
		commitLogin: function () {
			let that = this
			if (this.canLogin) {
				if (that.agreeChecked.length == 0) {
					uni.$u.toast('登录前请认真阅读用户协议，并同意！')
					return
				}
				if (that.yzmStatus === '获取验证码') {
					uni.$u.toast('验证码错误！')
					return
				}
				if (this.isLock) {
					uni.$u.toast('操作频繁！')
					return
				}
				this.isLock = true
				/* prettier-ignore */
				this.$https(false, 'get', {
					url: `/login/login/check/${that.userName}/${that.userYzm}`
				},(res)=> {
					if (!res.data) {
						res.data = { phone: that.userName }
					}
					// 登录成功处理
					Common.HokdoInit(res)
					setTimeout(()=>{
						that.isLock = false
					},600)
				}, error=>{
					setTimeout(()=>{
						that.isLock = false
					},600)
				})
				/* prettier-ignore */
			} else {
				uni.$u.toast('请输入正确的手机号或验证码！')
			}
		},
		checkboxClick() {
			this.$refs.policy.load()
		}
	}
}
</script>
<style lang="scss">
page {
	background: linear-gradient(180deg, #ffe6e6, #ffffff);
}
.login-msg {
	padding: 120rpx 48rpx 0;
}
.title {
	display: flex;
	align-items: flex-end;
	margin-bottom: 96rpx;
}
.title-active {
	font-size: 48rpx;
	color: rgba(61, 61, 61, 1);
}
.login-name {
	border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
	height: 104rpx;
	display: flex;
	align-items: center;
	margin-bottom: 32rpx;
}
.icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 24rpx;
}
.name-input {
	width: 580rpx;
	height: 40rpx;
	font-size: 32rpx;
	color: #333;
}

.cancel-btn {
	float: right;
	width: 46rpx;
	height: 46rpx;
	margin-top: 4rpx;
}
.yzm {
	padding-left: 48rpx;
	margin-left: 30rpx;
	min-width: 170rpx;
	font-size: 28rpx;
	height: 28rpx;
	line-height: 28rpx;
	color: #e50012;
	text-align: center;
	border-left: 1px #e5e5e5 solid;
}
.login-btn {
	width: 654rpx;
	height: 88rpx;
	line-height: 88rpx;
	background: #e5e5e5;
	color: #bac2ce;
	font-size: 28rpx;
	margin-top: 300rpx;
	display: block;
	border-radius: 16rpx;
	font-weight: 600;
	border: 0 none;
}
button:after {
	border: 0 none;
}
.login-btn2 {
	background: #e50012;
	color: #fff;
}
.holder {
	color: rgba(0, 0, 0, 0.3);
	font-size: 28rpx;
}
.dis-btn {
	color: #999;
}
.tips {
	font-size: 24rpx;
	color: #9ea9bc;
	margin: 24rpx 0 126rpx;
	text-align: center;
}
.default-checkbox {
	font-size: 24rpx;
	color: #999;
}
.default-checkbox-icon {
	display: block;
	background-color: #eee;
	width: 24rpx;
	height: 24rpx;
	border: 1px solid #ccc;
	border-radius: 50%;
	border-width: 2px;
	margin-right: 10rpx;
}

.agreement {
	font-size: 24rpx;
	width: 100%;
	display: flex;
	justify-content: center;
	/* position: fixed;
  bottom:100rpx; */
	margin-top: 70rpx;
}
.agreement .blue {
	display: inline;
}
.checkGroup {
	margin: 0 auto;
	font-size: 24rpx;
	color: #999;
	display: flex;
	align-items: center;
	justify-content: center;
}
::v-deep .checkGroup .u-checkbox__icon-wrap--circle {
	border-color: #999 !important;
	border-width: 2px;
	width: 30rpx !important;
	height: 30rpx !important;
}
::v-deep .checked .u-checkbox__icon-wrap--circle {
	border-color: #e50012 !important;
}
</style>
